<template>
	<li @click.stop="" class="'info_list form-list select_list hicon border-1px" v-bind:class="[{is_edit:!isEdit}]" @click="slide_($event)">
		<slot class="slot"></slot>
		<label class="form_label select_label" @click.stop="">{{label}}</label>
		<input type="text" hidden="hidden" class="txt form_select" v-bind:value="current_option.name" v-on:input="updateValue($event.target.value)" />
		<input type="text" class="txt form_select txt_" v-bind:class="[_aligned]" readonly="readonly" placeholder="未选择" v-bind:value="current_option.name" />
		<ul v-if="isEdit" class="sub_health">
			<li class="sub_health_list" v-for="item in infos" @click="updateValue($event,item)">{{item.name}}</li>
		</ul>
		<template v-if="isEdit">
			<img class="m_icon" v-if="iconType==0" src="../../assets/images/btn.png" />
			<img class="m_icon" v-if="iconType==1" src="../../assets/images/btn3.png" />
		</template>
	</li>
</template>
<script>
	import $ from 'jquery';
	export default {
		props: {
			label: {
				type: String,
				required: true
			},
			value: {
				default: ''
			},
			infos: {
				default: ''
			},
			aligned: {
				type: String,
				default: 'left'
			},
			isEdit: {
				type: Boolean,
				default: true
			},
			iconType: {
				type: Number,
				default: 0
			},
			default_first:{
				type:Boolean,
				default:false
			},
			validator:{
				
			}

		},
		computed: {
			_aligned() {
				return('text-' + this.aligned)
			}
		},
		data: function() {
			return {
				current_option: {},
				lag:false,
				rule_form: ['require'],
				placeholders: []
			};
		},
		mounted() {
			var that = this;
			if(that.value !== '') {
				$.each(that.infos, function(k, v) {
					if(v.code == that.value) {
						that.current_option = v;
						that.$emit('input', v.name);
						return;
					}
				});
			}else if(that.infos.length>0){
				if(that.default_first){
					that.current_option = that.infos[0];
					that.$emit('input', that.infos[0].code);
				}

			}
			$(document).on('click',function(){
				$(".sub_health").slideUp();
			});
		},
		watch: {
			value(val, oldval) {
				var that=this;
//				console.log(val, '_______', oldval);
				if(!this.lag){
					$.each(that.infos, function(k, v) {
//					console.log(that.value, v);
					if(v.code == that.value) {
						that.current_option = v;
						that.$emit('input', v.code);
						this.lag==true;
					}
				});
				}
//				if(val && val.length > 0 && !this.value.name) {
//					this.current_option = val[0]
//					this.$emit('input', val[0].code)					
//				}
			},
			infos(val, oldval) {
				var that = this;
//				console.log(val, '_______', oldval);
				if(val && val.length > 0 && !this.value.name) {
					if(that.default_first){
						this.current_option = val[0]
						this.$emit('input', val[0].code)
					}
										
				}
			}
		},
		methods: {
			slide_(event) {
				if(!this.isEdit) {
					return;
				}
				var dom = this.globalData.utils.get_target_dom($(event.target), 'form-list')
				var ul = dom.children('ul');
				var input = dom.children('.txt_')
				console.log(ul);
				$(".sub_health").slideUp();
				console.log(input.innerWidth())
				ul.width(input.innerWidth())
				if(ul.css('display') == 'none') {
					ul.slideDown()
				} else {
					ul.slideUp()
				}
			},
			req(){
				var that = this;
//				console.log(this.validator);
				var validator = this.validator;
				var reqs = [];
				for(var k in that.rule_form) {
					if(that.validator[that.rule_form[k]]) {
						reqs.push(that.rule_form[k]);
					}
				}
				for(var i = 0; i < reqs.length; i++) {
					if(!that[reqs[i]]().suc) {
						return that[reqs[i]]();
					}
				}
				return {
					suc: true,
					msg: '保存成功！'
				}
			},
			require() {
				var that = this;
				if(!this.value) {
					return {
						suc: false,
						msg: that.label + '不能为空'
					}
				} else {
					return {
						suc: true,
						msg: '保存成功！'
					}
				}
			},
			updateValue: function(event, value) {
				var dom = $(event.target)
				dom.parent().slideUp()
				console.log(value)
				var formattedValue = value;
				//				formattedValue = formattedValue.trim()
				this.current_option = formattedValue
				this.$emit('input', formattedValue.code)
				//      // 删除两侧的空格符
				//      .trim()
				//      // 保留 2 小数位
				//      .slice(
				//        0,
				//        value.indexOf('.') === -1
				//          ? value.length
				//          : value.indexOf('.') + 3
				//      )
				//    // 如果值不统一，手动覆盖以保持一致
				//    if (formattedValue !== value) {
				//      this.$refs.input.value = formattedValue
				//    }
				// 通过 input 事件发出数
			}
		}
	}
</script>

<style lang="less" scoped="scoped">
	@import 'index.less';
</style>